<template>
<div>
    <!--搜索栏-->
    <el-form :inline="true" :model="formInline" class="user-search">
        <el-form-item>
            <el-button size="small" type="success" icon="el-icon-search" @click="handleAdd" v-if="userType == '1'">添加</el-button>
        </el-form-item>
    </el-form>

    <!--列表-->
    <el-table size="small" :data="listData" highlight-current-row v-loading="loading" border element-loading-text="拼命加载中" style="width: 100%;">
        <el-table-column  align="center"  sortable prop="customerNumber" label="顾客序号"></el-table-column>
        <el-table-column  align="center"  sortable prop="orderTime" label="点单时间"></el-table-column>
        <el-table-column  align="center"  sortable prop="orderStatus" :formatter="formatOrderStatus" label="订单状态"></el-table-column>
        <el-table-column  align="center"  sortable prop="payStatus" :formatter="formatPayStatus" label="支付状态"></el-table-column>
        <el-table-column  align="center"  sortable prop="createUserName" label="点餐员"></el-table-column>
        <el-table-column  align="center"  sortable prop="foodListStr" label="餐品列表"></el-table-column>
        <el-table-column  align="center"  sortable prop="totalPrice" label="总价格"></el-table-column>
        <el-table-column align="center" label="操作">
            <template slot-scope="scope">
                <el-button size="mini" type="success" v-if="scope.row.orderStatus == '0'" @click="handleEdit(scope.$index, scope.row)">已上菜</el-button>
                <el-button size="mini" type="primary" v-if="scope.row.payStatus == '0'" @click="handleEdit1(scope.$index, scope.row)">已收款</el-button>
                <el-button size="mini" type="danger" @click="handleDel(scope.$index, scope.row)">删除</el-button>
            </template>
        </el-table-column>
    </el-table>

    <!-- 分页组件 -->
    <Pagination v-bind:child-msg="pageparm" @callFather="callFather"></Pagination>

    <!-- 编辑界面 -->
    <el-dialog :title="title" :visible.sync="editFormVisible" width="50%" @click="closeDialog">
        菜品名称：<el-input v-model="foodName" style="margin-left:0.2rem;width:50%;margin-bottom:2rem;"></el-input>
        <el-button size="small" type="success" icon="el-icon-search" @click="queryFood">查询</el-button><br />
        顾客序号：<el-input v-model="customerNumber" style="margin-left:0.2rem;width:50%;margin-bottom:2rem;"></el-input>
        <el-row :gutter="20">
            <el-row>
                <el-col :span="9" v-for="(item, index) in foodList" :key="index" :offset="2">
                    <el-card :body-style="{ padding: '0px' }">
                        <img :src="showUrl+item.imgPath" class="image" style="width:150px;height:150px">
                        <div style="padding: 14px;">
                            <span style="margin-left:5px">菜品名称：{{item.foodName}}</span><br />
                            <span style="margin-left:5px">菜品价格：{{item.price}}</span><br />
                            <span style="margin-left:5px">菜品数量：{{item.amount}}</span>
                            <div class="bottom clearfix">
                                <el-input v-model="item.orderAmount" @change="changeNum" style="margin:10px 0px;width:60%;"></el-input>
                            </div>
                        </div>
                    </el-card>
                </el-col>
            </el-row>
        </el-row>
        <div slot="footer" class="dialog-footer">
            <span>总价：{{totalPrice}}</span><br />
            <el-button size="small" @click="closeDialog">取消</el-button>
            <el-button size="small" type="primary" :loading="loading" class="title" @click="submitForm('editForm')">提交</el-button>
        </div>
    </el-dialog>
</div>
</template>

<script>
import * as api from '../../api/interface'
import Pagination from '../../components/Pagination'
export default {
    data() {
        return {
            loading: false, //是显示加载
            editFormVisible: false, //控制编辑页面显示与隐藏
            title: '',
            editForm: {},
            // rules表单验证
            rules: {
                userName: [{ required: true, message: '请输入姓名', trigger: 'blur' }],
            },
            //查询条件
            formInline: {
                page: 1, //当前页面
                limit: 10, //每页数量
            },
            // 删除部门
            seletedata: {
                ids: '',
                token: localStorage.getItem('logintoken')
            },
            userparm: [], //搜索权限
            listData: [], //用户数据
            // 分页参数
            pageparm: {
                currentPage: 1,
                pageSize: 10,
                total: 10
            },
            foodList: [],
            showUrl: api.showUrl,
            // reserveTime: null,
            customerNumber: null,
            foodName: "",
            totalPrice: 0,
          userType:""
        }
    },
    // 注册组件
    components: {
        Pagination
    },
    /**
     * 页面初始化方法
     */
    created() {
        this.queryFood();
        this.getData();
      this.userType = localStorage.getItem("userType");
    },
    methods: {
        formatOrderStatus: function (row, column) {
            return row.orderStatus == '0' ? "未上菜" :
                row.orderStatus == "1" ? "已上菜" :
                "未知";
        },
        formatPayStatus: function (row, column) {
            return row.payStatus == '0' ? "未付款" :
                row.payStatus == "1" ? "已付款" :
                "未知";
        },
        // 获取列表数据
        getData() {
            this.loading = true
            let para = {
                current: this.formInline.page,
                size: this.formInline.limit,
                createUser: localStorage.getItem("userType") == "1" ? localStorage.getItem("userId") : null
            }
            api.queryOrderByPage(para).then(data => {
                this.logining = false;
                if (data.message != "success") {
                    this.logining = false;
                    this.$message.error(data.message)
                } else {
                    this.loading = false
                    this.listData = data.returnPage.records
                    this.listData.forEach(data => {
                        let foodListStr = data.foodList.map(food => food.foodName + ':' + food.orderAmount + '份，').reduce((a, b) => a + b);
                        data.foodListStr = foodListStr.substring(0, foodListStr.length - 1)
                    })
                    this.pageparm.currentPage = data.returnPage.current
                    this.pageparm.pageSize = data.returnPage.size
                    this.pageparm.total = data.returnPage.total
                }
            }).catch(e => {
                this.logining = false;
            });
        },
        // 分页插件事件
        callFather(parm) {
            this.formInline.page = parm.currentPage
            this.formInline.limit = parm.pageSize
            this.getData()
        },
        //显示添加界面
        handleAdd: function (index, row) {
            this.editFormVisible = true
            this.title = '点单'
            this.foodName = '';
            this.totalPrice = 0;
            // this.reserveTime = null;
            this.customerNumber = null;
            this.queryFood();
        },
        //显示编辑界面
        handleEdit: function (index, row) {
            let para = Object.assign({}, row);
            para.orderStatus = '1';
            para.totalPrice = this.totalPrice;
            this.loading = true;
            api.updateOrder(para)
                .then(res => {
                    this.loading = false;
                    if (res.message == 'success') {
                        this.$message({ message: "提交成功", type: "success" });
                        this.getData();
                        this.editFormVisible = false;
                    } else {
                        this.$message({ type: 'error', message: res.message })
                    }
                })
                .catch(e => {
                    // this.editFormVisible = false
                    this.loading = false
                })
        },
        handleEdit1: function (index, row) {
            let para = Object.assign({}, row);
            para.payStatus = '1';
            this.loading = true;
            api.updateOrder(para)
                .then(res => {
                    this.loading = false;
                    if (res.message == 'success') {
                        this.$message({ message: "提交成功", type: "success" });
                        this.getData();
                        this.editFormVisible = false;
                    } else {
                        this.$message({ type: 'error', message: res.message })
                    }
                })
                .catch(e => {
                    // this.editFormVisible = false
                    this.loading = false
                })
        },
        // 关闭编辑
        closeDialog() {
            this.editFormVisible = false
        },
        // 编辑、增加页面保存方法
        submitForm(editData) {
            let para = {
                // reserveTime: this.reserveTime,
                customerNumber: this.customerNumber
            }
            para.foodList = this.foodList.filter(item => item.orderAmount > 0);
            if (!para.foodList || para.foodList.length == 0) {
                this.$message({ message: "请至少点一个菜品", type: "warning" });
                return;
            }
            para.createUser = localStorage.getItem("userId");
            para.createUserName = localStorage.getItem("userName");
            this.loading = true;
            api.updateOrder(para)
                .then(res => {
                    this.loading = false;
                    if (res.message == 'success') {
                        this.$message({ message: "提交成功", type: "success" });
                        this.getData();
                        this.editFormVisible = false;
                    } else {
                        this.$message({ type: 'error', message: res.message })
                    }
                })
                .catch(e => {
                    // this.editFormVisible = false
                    this.loading = false
                })
        },
        // 删除
        handleDel(index, row) {
            this.$confirm('确定要删除吗?', '信息', { confirmButtonText: '确定', cancelButtonText: '取消', type: 'warning' })
                .then(() => {
                    let para = {
                        orderId: row.orderId
                    }
                    api.delOrder(para)
                        .then(res => {
                            if (res.message == 'success') {
                                this.$message({ message: "删除成功", type: "success" });
                                this.getData();
                            } else {
                                this.$message({ type: 'error', message: res.message })
                            }
                        })
                        .catch(e => {
                            this.loading = false
                        })
                });
        },
        queryFood() {
            let para = {
                foodName: this.foodName
            }
            api.queryFood(para).then(data => {
                if (data.message != "success") {
                    this.$message.error(data.message)
                } else {
                    this.foodList = data.returnList
                    console.log(this.foodList)
                    let that = this
                    // this.foodList.forEach(item=> item.orderAmount = 0)

                    console.log(this.foodList)
                }
            }).catch(e => {});
        },
        changeNum() {
            let totalPrice = 0;
            this.foodList.forEach(item => {
                totalPrice += parseFloat(item.orderAmount ? item.orderAmount * item.price : 0)
            });
            this.totalPrice = totalPrice;
        }

    }
}
</script>

<style scoped>
.user-search {
    margin-top: 20px;
}

.el-row {
    margin-bottom: 20px;
}

.el-col {
    border-radius: 4px;
}

.bg-purple-dark {
    background: #99a9bf;
}

.bg-purple {
    background: #d3dce6;
}

.bg-purple-light {
    background: #e5e9f2;
}

.grid-content {
    border-radius: 4px;
    min-height: 36px;
}

.row-bg {
    padding: 10px 0;
    background-color: #f9fafc;
}
</style>
